<template>
  <view class="video">
    <video
      class="container"
      :id="id"
      :src="src"
      :autoplay="autoplay"
      :loop="loop"
      :muted="muted"
      :initial-time="initialTime"
      :duration="duration"
      :controls="controls"
      :danmu-list="danmuList"
      :danmu-btn="danmuBtn"
      :enable-danmu="enableDanmu"
      :page-gesture="pageGesture"
      :direction="direction"
      :show-progress="showProgress"
      :show-fullscreen-btn="showFullscreenBtn"
      :show-play-btn="showPlayBtn"
      :show-center-play-btn="showCenterPlayBtn"
      :enable-progress-gesture="enableProgressGesture"
      :objectFit="objectFit"
      :poster="poster"
      @play="onPlay"
      @pause="onPause"
      @ended="onEnded"
      @timeupdate="onTimeUpdate"
      @fullscreenchange="onFullScreenChange"
      @waiting="onWaiting"
      @error="onVideoError"
    ></video>
    <!-- <cover-view class="fullscreen"></cover-view> -->
  </view>
</template>

<script>
let videoContext = null;
export default {
  data() {
    return {};
  },
  props: {
    id: {
      type: String,
      default: "video"
    },
    src: String,
    autoplay: { type: Boolean, default: false },
    loop: { type: Boolean, default: false },
    muted: { type: Boolean, default: false },
    initialTime: Number,
    duration: Number,
    controls: { type: Boolean, default: false },
    danmuList: [Array, Object],
    danmuBtn: { type: Boolean, default: false },
    enableDanmu: { type: Boolean, default: false },
    pageGesture: { type: Boolean, default: false },
    direction: Number,
    showProgress: { type: Boolean, default: true },
    showFullscreenBtn: { type: Boolean, default: true },
    showPlayBtn: { type: Boolean, default: true },
    showCenterPlayBtn: { type: Boolean, default: true },
    enableProgressGesture: { type: Boolean, default: true },
    objectFit: { type: String, default: "contain" },
    poster: String
  },
  mounted() {
    // #ifndef MP-ALIPAY
    videoContext = uni.createVideoContext(this.id, this);
    // #endif
    this.$emit("event-mounted", videoContext);
  },
  methods: {
    onPlay(e) {
      this.$emit("event-play", e);
    },
    onPause(e) {
      this.$emit("event-pause", e);
    },
    onEnded(e) {
      this.$emit("event-ended", e);
    },
    onTimeUpdate(e) {
      this.$emit("event-timeupdate", e);
    },
    onFullScreenChange(e) {
      this.$emit("event-fullscreenchange", e);
    },
    onWaiting(e) {
      this.$emit("event-waiting", e);
    },
    onVideoError(e) {
      console.warn("onVideoError", { e });
      this.$emit("event-error", e);
    }
  }
};
</script>

<style lang="scss">
.video {
  width: 100%;
  height: 100%;
  .container{
    width: 100%;
    height: 100%;
  }
  //
  .fullscreen {
    position: absolute;
  }
}
</style>
